<div id="forms" class="page-layout simple fullwidth doc-page" layout="column">

    <!-- HEADER -->
    <div class="header md-accent-bg" layout="row" layout-align="space-between">
        <div layout="column" layout-align="space-between">
            <div class="breadcrumb" layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-home" class="s16"></md-icon>
                <md-icon md-font-icon="icon-chevron-right" class="s16 separator"></md-icon>
                <span class="parent">USER INTERFACE</span>
            </div>

            <div class="title">Forms</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content" layout="column">

        <!-- STEPPER -->
        <div class="md-title">Stepper</div>
        <div class="pb-16">
            <b>ms-stepper</b> is a custom made form wizard directive. It follows Google's Material Design specifications
            and we recommend you to use it. If for some reason, it's not suitable for your project, you can always use
            the Form Wizard that we put together using md-tabs and forms.
        </div>

        <form name="stepper" ms-stepper ng-submit="vm.submitStepper()" ng-model="vm.stepper" novalidate>
            <ms-stepper-step ng-form="step1" step="1" step-title="'Personal Information'">
                <div ng-include="'app/main/ui/forms/stepper-steps/step-1.html'"></div>
            </ms-stepper-step>

            <ms-stepper-step ng-form="step2" step="2" step-title="'Address'" optional-step>
                <div ng-include="'app/main/ui/forms/stepper-steps/step-2.html'"></div>
            </ms-stepper-step>

            <ms-stepper-step ng-form="step3" step="3" step-title="'Payment Method'">
                <div ng-include="'app/main/ui/forms/stepper-steps/step-3.html'"></div>
            </ms-stepper-step>
        </form>
        <!-- / STEPPER -->

        <div class="md-title mt-32">Form Wizard</div>
        <div class="pb-16">
            Form wizard is a combination of md-tabs and forms that we have created for you. You can have as many steps
            as you want.
        </div>
        <div layout="row">

            <!-- FORM WIZARD -->
            <ms-form-wizard flex>
                <md-tabs md-dynamic-height md-selected="msWizard.selectedIndex" md-center-tabs="true">
                    <md-tab>
                        <md-tab-label>
                            <span class="ms-form-wizard-step-label">
                                <span class="ms-form-wizard-step-number md-accent-bg"
                                      ng-if="wizardStep1.$invalid">1</span>
                                <span class="ms-form-wizard-step-number md-accent-bg" ng-if="wizardStep1.$valid">
                                    <i class="icon-check s16"></i>
                                </span>
                                <span class="ms-form-wizard-step-text">Personal Information</span>
                            </span>
                        </md-tab-label>

                        <md-tab-body>
                            <form name="wizardStep1" class="md-inline-form" ms-form-wizard-form novalidate>
                                <div layout="column" layout-gt-xs="row" flex>
                                    <md-input-container flex="100" flex-gt-xs="50">
                                        <input type="text" name="firstname" ng-model="vm.formWizard.firstname"
                                               placeholder="Firstname"
                                               required>
                                        <div ng-messages="wizardStep1.firstname.$error"
                                             role="alert">
                                            <div ng-message="required">
                                                <span>Firstname field is required.</span>
                                            </div>
                                        </div>
                                    </md-input-container>

                                    <md-input-container flex="100" flex-gt-xs="50">
                                        <input type="text" name="lastname" ng-model="vm.formWizard.lastname"
                                               placeholder="Lastname"
                                               required>
                                        <div ng-messages="wizardStep1.lastname.$error"
                                             role="alert">
                                            <div ng-message="required">
                                                <span>Lastname field is required.</span>
                                            </div>
                                        </div>
                                    </md-input-container>
                                </div>

                                <md-input-container class="md-block">
                                    <input type="email" name="email" ng-model="vm.formWizard.email" placeholder="Email"
                                           ng-pattern="/^.+@.+\..+$/" required>
                                    <div ng-messages="wizardStep1.email.$error"
                                         role="alert" multiple>
                                        <div ng-message="required">
                                            <span>Email field is required</span>
                                        </div>
                                        <div ng-message="pattern">
                                            <span>Email must be a valid e-mail address</span>
                                        </div>
                                    </div>
                                </md-input-container>

                                <div layout="column" layout-gt-sm="row" flex>
                                    <md-input-container flex="100" flex-gt-xs="50">
                                        <input type="password" name="password" ng-model="vm.formWizard.password"
                                               placeholder="Password"
                                               required>
                                        <div ng-messages="wizardStep1.password.$error"
                                             role="alert">
                                            <div ng-message="required">
                                                <span>Password field is required.</span>
                                            </div>
                                        </div>
                                    </md-input-container>

                                    <md-input-container flex="100" flex-gt-xs="50">
                                        <input type="password" name="passwordConfirm"
                                               ng-model="vm.formWizard.passwordConfirm"
                                               placeholder="Password (Confirm)"
                                               required>
                                        <div ng-messages="wizardStep1.passwordConfirm.$error"
                                             role="alert">
                                            <div ng-message="required">
                                                <span>Password (Confirm) field is required.</span>
                                            </div>
                                        </div>
                                    </md-input-container>
                                </div>
                            </form>
                        </md-tab-body>
                    </md-tab>

                    <md-tab ng-disabled="wizardStep1.$invalid">
                        <md-tab-label>
                            <span class="ms-form-wizard-step-label">
                                <span class="ms-form-wizard-step-number md-accent-bg"
                                      ng-if="wizardStep2.$invalid">2</span>
                                <span class="ms-form-wizard-step-number md-accent-bg" ng-if="wizardStep2.$valid">
                                    <i class="icon-check s16"></i>
                                </span>
                                <span class="ms-form-wizard-step-text">Address</span>
                            </span>
                        </md-tab-label>

                        <md-tab-body>
                            <form name="wizardStep2" ms-form-wizard-form novalidate>
                                <div layout="column" layout-gt-xs="row">
                                    <md-input-container flex>
                                        <label>City</label>
                                        <input type="text" name="city" ng-model="vm.formWizard.city">
                                    </md-input-container>

                                    <md-input-container flex>
                                        <label>State</label>
                                        <md-select ng-model="vm.formWizard.state">
                                            <md-option ng-repeat="state in vm.states" value="{{state.abbrev}}">
                                                {{state.abbrev}}
                                            </md-option>
                                        </md-select>
                                    </md-input-container>

                                    <md-input-container flex>
                                        <label>Postal Code</label>
                                        <input name="postalcode" ng-model="vm.formWizard.postalCode" placeholder="12345"
                                               required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">
                                        <div ng-messages="wizardStep2.postalcode.$error"
                                             role="alert" multiple>
                                            <div ng-message="required"><span>You must supply a postal code.</span></div>
                                            <div ng-message="pattern">
                                                <span>That doesn't look like a valid postal code.</span></div>
                                            <div ng-message="md-maxlength">
                                                <span>Postal code can't be longer than 5 characters.</span>
                                            </div>
                                        </div>
                                    </md-input-container>
                                </div>

                                <md-input-container class="md-block">
                                    <label>Address</label>
                                    <textarea ng-model="vm.formWizard.address" columns="1" md-maxlength="150"
                                              rows="5" required></textarea>
                                    <div ng-messages="wizardStep2.address.$error"
                                         role="alert" multiple>
                                        <div ng-message="required"><span>Address field is required.</span></div>
                                        <div ng-message="md-maxlength">
                                            <span>Address can't be longer than 150 characters.</span>
                                        </div>
                                    </div>
                                </md-input-container>
                            </form>
                        </md-tab-body>
                    </md-tab>

                    <md-tab ng-disabled="wizardStep1.$invalid || wizardStep2.$invalid">
                        <md-tab-label>
                            <span class="ms-form-wizard-step-label">
                                <span class="ms-form-wizard-step-number md-accent-bg"
                                      ng-if="wizardStep3.$invalid">3</span>
                                <span class="ms-form-wizard-step-number md-accent-bg" ng-if="wizardStep3.$valid">
                                    <i class="icon-check s16"></i>
                                </span>
                                <span class="ms-form-wizard-step-text">Payment Method</span>
                            </span>
                        </md-tab-label>
                        <md-tab-body>
                            <form name="wizardStep3" ms-form-wizard-form novalidate>
                                <md-input-container class="md-block">
                                    <input type="text" name="cardholder" ng-model="vm.formWizard.cardholder"
                                           placeholder="Card Holder"
                                           required>
                                    <div ng-messages="wizardStep3.cardholder.$error"
                                         role="alert">
                                        <div ng-message="required">
                                            <span>Card holder field is required.</span>
                                        </div>
                                    </div>
                                </md-input-container>

                                <div layout="column" layout-gt-xs="row">
                                    <md-input-container flex="100" flex-gt-xs="33">
                                        <input type="text" name="cardnumber" ng-model="vm.formWizard.cardnumber"
                                               placeholder="Card Number"
                                               required>
                                        <div ng-messages="wizardStep3.cardnumber.$error"
                                             role="alert">
                                            <div ng-message="required">
                                                <span>Card number field is required.</span>
                                            </div>
                                        </div>
                                    </md-input-container>

                                    <md-input-container flex="100" flex-gt-xs="33">
                                        <input type="text" name="CC2" ng-model="vm.formWizard.cc2"
                                               placeholder="CC2" md-maxlength="3"
                                               required>
                                        <div ng-messages="wizardStep3.cc2.$error"
                                             role="alert" multipl>
                                            <div ng-message="required">
                                                <span>CC2 field is required.</span>
                                            </div>
                                            <div ng-message="md-maxlength">
                                                <span>CC2 can't be longer than 3 characters.</span>
                                            </div>
                                        </div>
                                    </md-input-container>

                                    <md-input-container flex="100" flex-gt-xs="33">
                                        <input type="text" name="expirationDate" ng-model="vm.formWizard.expirationDate"
                                               placeholder="Expiration Date"
                                               required>
                                        <div ng-messages="wizardStep3.expirationDate.$error"
                                             role="alert">
                                            <div ng-message="required">
                                                <span>Expiration date field is required.</span>
                                            </div>
                                        </div>
                                    </md-input-container>
                                </div>
                            </form>
                        </md-tab-body>
                    </md-tab>
                </md-tabs>

                <div class="navigation" flex layout="row" layout-align="center center">
                    <md-button class="md-raised md-accent" ng-click="msWizard.previousStep()"
                               ng-disabled="msWizard.isFirstStep()">
                        Previous
                    </md-button>
                    <div class="steps">
                        <span ng-repeat="form in msWizard.forms"
                              ng-class="{'selected md-accent-bg':msWizard.selectedIndex === $index}"></span>
                    </div>
                    <md-button class="md-raised md-accent" ng-click="msWizard.nextStep()"
                               ng-hide="msWizard.isLastStep()"
                               ng-disabled="msWizard.currentStepInvalid()">
                        Next
                    </md-button>
                    <md-button class="md-raised md-warn" ng-click="vm.sendForm(); msWizard.resetForm();"
                               ng-show="msWizard.isLastStep()"
                               ng-disabled="msWizard.formsIncomplete()">
                        Send
                    </md-button>
                </div>

            </ms-form-wizard>
            <!-- / FORM WIZARD -->

        </div>

        <div class="md-title mt-32">Basic form with validation</div>
        <div class="pb-16">With this form example, Submit button will only be activated if all the required fields are
            filled and if there is no error on the form.
        </div>
        <div layout="row">

            <!-- BASIC FORM -->
            <div class="form-wrapper md-whiteframe-1dp" flex="60">

                <form name="basicForm" class="md-inline-form" novalidate>

                    <div class="form-title">Optional form title</div>

                    <div layout="column" layout-gt-sm="row">
                        <md-input-container flex>
                            <input type="text" name="firstname" ng-model="vm.basicForm.firstname"
                                   placeholder="Firstname"
                                   required>
                            <div ng-messages="basicForm.firstname.$error"
                                 role="alert">
                                <div ng-message="required">
                                    <span>Firstname field is required.</span>
                                </div>
                            </div>
                        </md-input-container>

                        <md-input-container flex>
                            <input type="text" name="lastname" ng-model="vm.basicForm.lastname" placeholder="Lastname"
                                   required>
                            <div ng-messages="basicForm.lastname.$error"
                                 role="alert">
                                <div ng-message="required">
                                    <span>Lastname field is required.</span>
                                </div>
                            </div>
                        </md-input-container>
                    </div>

                    <div layout="column" layout-gt-xs="row">
                        <md-input-container flex>
                            <label>City</label>
                            <input type="text" name="city" ng-model="vm.basicForm.city">
                        </md-input-container>

                        <md-input-container flex>
                            <label>State</label>
                            <md-select ng-model="vm.basicForm.state">
                                <md-option ng-repeat="state in vm.states" value="{{state.abbrev}}">
                                    {{state.abbrev}}
                                </md-option>
                            </md-select>
                        </md-input-container>

                        <md-input-container flex>
                            <label>Postal Code</label>
                            <input name="postalcode" ng-model="vm.basicForm.postalCode" placeholder="12345"
                                   required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">
                            <div ng-messages="basicForm.postalcode.$error" role="alert" multiple>
                                <div ng-message="required"><span>You must supply a postal code.</span></div>
                                <div ng-message="pattern"><span>That doesn't look like a valid postal code.</span></div>
                                <div ng-message="md-maxlength">
                                    <span>Postal code can't be longer than 5 characters.</span>
                                </div>
                            </div>
                        </md-input-container>
                    </div>

                    <md-input-container class="md-block">
                        <label>Biography</label>
                        <textarea ng-model="vm.basicForm.biography" columns="1" md-maxlength="150" rows="5"></textarea>
                    </md-input-container>

                    <md-button type="submit" class="md-raised md-accent" aria-label="Submit"
                               ng-disabled="basicForm.$invalid || basicForm.$pristine">
                        Submit
                    </md-button>
                </form>

            </div>
            <!-- / BASIC FORM -->

            <!-- BASIC FORM DATA -->
            <div class="form-wrapper form-data-wrapper md-whiteframe-1dp" flex="40">
                <div class="form-title">Form ng-model data</div>
                <div class="json-data-wrapper">
                    <pre>{{vm.basicForm | json}}</pre>
                </div>
            </div>
            <!-- / BASIC FORM DATA -->
        </div>

    </div>
    <!-- / CONTENT -->

</div>